<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击发送</button>
  <script>
    /* 1. call(接this对象,参数,) 不接this指向可以写null
  调用函数
    改变this指向  */
    // const obj = {
    //   name: 'pink'
    // }
    // function fn(x, y) {
    //   console.log(this, x, y)

    // }
    // fn.call(obj, 1, 2)
//call 还能 检测数据类型
// console.log(Object.prototype.toString.call('aaa'))
//     console.log(Object.prototype.toString.call(null))
//     console.log(Object.prototype.toString.call([]))
//     console.log(Object.prototype.toString.call(undefined))
    /* 
      apply 的后面只能接 [] 有数组接着
      应用场景 数组求和 
    */
    // const obj = {
    //   name: 'pink'
    // }
    // function fn(x, y) {
    //   console.log(this, x, y)

    // }
    // fn.apply(obj,[1,2])

    // const arr = [1,2,3,4,6]
    // const max = Math.max.apply(null,arr)
    // console.log(max)
    

    //1.bind 不会调用函数 
    //2. 能改变this指向
    //3. 返回值是个函数    但是这个函数里面的this是更改过的obj
    const obj = {
      age: 18
    }
    function fn(x,y,z) {
      console.log(this)
      console.log(x+y+z)
      
    }
    
    fn()
    const fun = fn.bind(obj,1,2,3)
    fun()

    console.log(fn.bind(obj)) //返回的是这个函数
    

    document.querySelector('button').addEventListener('click', function () {
      this.disabled = true
      window.setTimeout(function () {
        //这里的this本来 是指向这个定时器 window的 但是 后面加的bind this 指向的这个事件触发者btn
        this.disabled = false
      }.bind(this), 2000)
    })
  </script>
</body>

</html>